<template>
	<view>
		<view class="flex_col background_white" style="width: 100vw">
			<view class="flex_row">
				<view class="flex_col" style="margin: 40rpx;">
					<view style="font-size: 40rpx;color: black;font-weight: bold;">选择你的训练时间</view>
					<!-- <view style="font-size: 32rpx;color: black;">{{"(课程："+courseName+")"}}</view> -->
				</view>
				<view class="flex"></view>
				<!-- <image src="/static/logo.png" style="height:80rpx;width:80rpx;margin-top: 36rpx;margin-right: 44rpx;"></image> -->
			</view>
			<view style="height:2rpx;background-color: #9e9e9e;margin: 0rpx 0 24rpx 0;"></view>
			<weekday ref="week" @weekdaychange="weekdaychange"></weekday>
			<view v-for="item,index in timeList" :key="id">
				<view class="center flex_row" @click="indexChanged(index)">
					<view :class="index == selectedIndex ? 'selected_time' : 'unselected_time'">{{item}}</view>
				</view>
			</view>
			
			<button class="btn_confirm" hover-class="btn_confirm_hover" style="margin-top: 120rpx;margin-bottom: 86rpx;" @click="confirm_order">确认</button>
		</view>
	</view>
</template>

<script>
	import weekday from "./weekday.vue"
	import moment from "../utils/moment.js"
	export default {
		components:{
			weekday,
		},
		props:{
			courseName:String,
			timeList: {
				type: Array,
				default () {
					return []
				}
			},
		},
		name:"select_datetime",
		data() {
			return {
				selectedIndex:0,
				date:moment().format("YYYY-MM-DD"),
				time:"",
			};
		},
		onLoad(opt){
			
		},
		onShow(){
			this.selectedIndex = 0
			this.time = this.timeList[this.selectedIndex]
		},
		methods:{
			weekdaychange(week){
				console.log(week)
				console.log(this.timeList)
				this.date = week.detail.date.label
			},
			indexChanged(index){
				this.selectedIndex = index
			},
			confirm_order(){
				var result = {}
				result.date = this.date 
				result.time = this.timeList[this.selectedIndex]
				console.log(result.time)
				this.$emit("onConfirm",result)
			},
		}
	}
</script>

<style>
.selected_time{
	border-radius: 36rpx;
	margin-top: 26rpx;
	display: flex;
	font-size: 28rpx;
	color: black;
	background-color: #dedede;
	width:654rpx;
	height:72rpx;
	align-items: center;
	justify-content: center;
}
.unselected_time{
	border-radius: 36rpx;
	margin-top: 26rpx;
	display: flex;
	font-size: 28rpx;
	color: #a3b3b7;
	background-color: #F2F6FA;
	width:654rpx;
	height:72rpx;
	align-items: center;
	justify-content: center;
}

.btn_confirm{
	color: white;
	width: 650rpx;
	background-color: #272f30; 
}
.btn_confirm_hover{
	color: white;
	background-color: rgb(112,128,144);
	width: 650rpx;
}
</style>
